<template>
	<view class="pages">
		<view class="indexBg">
			<view class="indexBg-top">
				<view class="list">
					<view class="item">
						<view class="num">{{ earnings.xfed  || 0}}</view>
						<view class="txt">消费额度</view>
						<view class="p">已消费:¥{{earnings.hydyyj}}</view>
						<view class="btn" @tap.stop="$tools.switchTab('/pages/index/shop')">去消费</view>
					</view>
					<view class="item" >
						<view class="num">{{earnings.sfjf || 0}}</view>
						<view class="txt">释放积分</view>
						<view class="p">转入消费券</view>
						<view class="btn" @tap.stop="$tools.jump('/pages/gift/gift',3)">解锁</view>
						<image class="ico ico1" @tap.stop="$tools.jump('/pages/gift/gift',3)" src="@/static/index1/look.gif" mode="heightFix"></image>
					</view>
					<view class="item">
						<view class="num">{{earnings.xfq ||  0}}</view>
						<view class="txt">消费券</view>
						<view class="p">兑换商品</view>
						<view class="btn" @tap.stop="$tools.jump('/pages/gift/gift',4)">兑换</view>
					</view>
				</view>
			</view>
			<view class="indexBg-tab">
				<view class="list">
					<view class="item" @tap.stop="unLock()">
						<image class="ico ico1" src="@/static/index1/icon-1.gif" mode="heightFix"></image>
						<view class="ico"></view>
						<view class="txt">每日打卡</view>
					</view>
					<view class="item" @tap.stop="$tools.noOpen">
						<image class="ico" src="@/static/index1/icon-2.png" mode=""></image>
						<view class="txt">每日素材</view>
					</view>
					<view class="item" @tap.stop="$tools.noOpen">
						<image class="ico" src="@/static/index1/icon-3.png" mode=""></image>
						<view class="txt">新人教学</view>
					</view>
					<view class="item" @tap.stop="$tools.jump('/pages/share/share')">
						<image class="ico" src="@/static/index1/icon-4.png" mode=""></image>
						<view class="txt">立即分享</view>
					</view>
				</view>
			</view>
			<!-- 轮播图 -->
			<view class="swiper-bg">
				<uni-swiper-dot :info="info" :current="current" mode="false" class="banner">
					<view class="swiperBox index-swiperBox ">
						<view class="swiperBox-wrapper">
							<swiper :indicator-dots="true" :autoplay="true" :interval="2500" :duration="1000" :circular="true" class="swiperBox-swiper" @change="changeSwiper"
								indicator-dots indicator-color="rgba(255, 255, 255, 0.52)" indicator-active-color="#FFFFFF">
								<swiper-item class="swiperBox-swiper__item" v-for="(item, index) in info" :key="index">
									<image :src="item" mode="widthFix" ></image>
								</swiper-item>
							</swiper>
						</view> 
					</view>
				</uni-swiper-dot>
			</view>
			<!-- 专区列表 -->
			<view class="typeBox">
				<view class="typeBox-list">
					<view class="item" v-for="(item,index) in tabList" :key="index"
					@tap.stop="$tools.jump('/pages/goods/goodsList','热销榜单',item.id,item.name)">
						<image class="img" :src="item.image" mode=""></image>
						<view class="txt">{{item.name}}</view>
					</view>
				</view>
			</view>
			<!-- 商品列表 -->
			<view class="indexGoods">
				<view class="title">
					<image class="ico" src="@/static/index1/hot.png" mode=""></image>更多推荐
				</view>
				<view class="indexGoods-list">
					<view class="indexGoods-list__item" v-for="(item,index) in goodsDataList" :key="index"
					@tap.stop="$tools.jump('/pages/goods/goodsDetails',item.id)">
						<view class="imgBox">
							<image :src="item.image" mode="aspectFill"></image>
						</view>
						<view class="content">
							<view class="name">{{ item.storeName }}</view>
							<view class="operateBig">
								<view class="price"><text class="unit">￥</text> {{ item.price }}</view>
								<view class="sales">赠送<text class="num">{{ cheng(item.price,Number(systemParam.GIVE_SCORE_MULTIPLE))}}</text>积分</view>
							</view>
						</view>
					</view>
				</view>
				<!-- <goodsList :goodsDataList="goodsDataList"></goodsList> -->
			</view>
		</view>
	<!-- 底部导航 -->
	<!-- <initTabbar :current-page="0" />	 -->
	<!-- 播放弹窗 -->
	<uni-popup class="modal-bg" ref="psdPopup" type="center" :animation="true" @change="changePopup($event,'psdPopup')">
		<view class="modal">	
			<view class="video-box">
				<view class="txt" v-if="totalDuration>0"> <text>{{ remainingTime==0?'点击关闭才获取奖励': remainingTime+'秒后可获取获得奖励'}}</text> </view>
				<image class="close" @tap.stop="closeVideo()" src="@/static/public/close.png" mode="heightFix"></image>
				<video
					class="video"
					id="myVideo"
					:src="videoSrc"
					:controls="false"
					show-fullscreen-btn
					playsinline
					x5-playsinline
					x5-video-player-type="h5"
					x5-video-player-fullscreen="true"
					@play="onPlay"
					@timeupdate="onTimeUpdate"
					@ended="onVideoEnded"
				></video>
			</view>
		</view>
		</uni-popup>
		<uni-popup class="modal-bg" ref="noticePopup" type="center" :animation="true" @change="changePopup($event,'noticePopup')">
			<view class="model">
				<view class="notice-box">
					<view class="title">{{sysNotice.noticeTitle}}</view>
					<view class="content" v-html="sysNotice.noticeContent"></view>
						<view class="bottom">
							<view class="txt">盛选生活</view>
							<view class="time">{{sysNotice.createTime}}</view>
						</view>
					<image class="close" @tap.stop="hidePopup('noticePopup')" src="@/static/index1/close.png" mode="heightFix"></image>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
export default {
	components:{
	},
	data() {
		return {
			pageIndex:1,
			pageSize:10,
			total:0,
			current:0,
			info: [
					// {image: '../../static/index/banner.png'},{image: '../../static/index/banner.png'},
			],
			tabList:[],
			earnings:{},	
			userMoney: {},
			goodsDataList:[],
			zoneId:'', // 分区id
			systemParam:{},
			isRead:0, // 是否已看,0-未看，2-已看
			videoSrc:'',
			totalDuration: 0, // 视频总时长（秒）
			currentTime: 0, // 当前播放时长（秒）
			remainingTime: 0, // 格式化后的剩余时间
			showClose:false,
			sysNotice:{}
		};
	},
	onReady() {
	},
	onShow(){
		this.init()
	},
	// 下拉刷新
	onPullDownRefresh() {
			this.init();
		setTimeout(function () {
			uni.stopPullDownRefresh();
		}, 500);
	},
	onReachBottom() {
		console.log("dd",this.total );
		if (this.goodsDataList.length < this.total) {
			this.pageIndex++;
			console.log("pageIndex",this.pageIndex)
			this.getGoodsList1()
		}
	},
	methods: {
		init(){
			this.pageIndex = 1;
			this.pageSize=10
			this.total=0
			this.goodsDataList=[]
			this.getSystemParam();
			this.getMyEarnings()
			this.getUserMoney();
			this.getGoodsList()
			this.getVideoList();
			this.getVideoProfitSize()
			this.getSysNoticeList();
		},
		// 获取数据
		getMyEarnings(){
			var data = {};
			this.$Ajax('/api/money/homeData',
			data,
			res => {
					if (res.code == 200) {
						this.earnings = res.data;
					}
				}, err => {
				}, 'GET'
			)
		},
		// 商品
		getGoodsList(){
			var data = {
				pageIndex:this.pageIndex,
				pageSize:this.pageSize,
				zoneType:2,
				sortType:5,
				sequence:1
			};
			// uni.showLoading({
			// 	mask:true
			// })
			this.$Ajax('/api/product/homeProducts',data,res => {
				uni.hideLoading();
				this.isShowPage = true;
					if (res.code == 200) {
						this.tabList = res.data
						const index=res.data.findIndex(item=>item.name=='更多')
						// console.log('index',index)
						if(index>-1){
							const data = res.data[index].productPage
							this.pages = data.pages;
							this.total = data.total;
							this.goodsDataList = this.goodsDataList.concat(data.list);
							this.zoneId = res.data[index].id
							this.info = res.data[index].images?(res.data[index].images).split(','):[]
						}
						console.log('goodsDataList',this.goodsDataList,',info',this.info,',zoneId',this.zoneId)
					}
				}, err =>{
					this.isShowPage = true;
					uni.hideLoading();
				}, 'GET'
			)
		},
		// 商品分页
		getGoodsList1(){
			var data = {
				pageIndex:this.pageIndex,
				pageSize:this.pageSize,
				zoneId :this.zoneId,
				sortType:5,
				sequence:1
			};
			// uni.showLoading({
			// 	mask:true
			// })
			this.$Ajax('/api/product/discountList',data,res => {
				uni.hideLoading();
				this.isShowPage = true;
					if (res.code == 200) {
						this.pages = res.data.pages;
						this.total = res.data.total;
						this.goodsDataList = this.goodsDataList.concat(res.data.list);
						console.log('goodsDataList',this.goodsDataList)
					}
				}, err =>{
					this.isShowPage = true;
					uni.hideLoading();
				}, 'GET'
			)
		},
		changeSwiper(e) {
			this.current = e.detail.current;
		},
		// 获取公告
		getSysNoticeList() {
			var data = {
				pageIndex:1,
				pageSize:1000
			};
			console.log("data：",data);
			this.$Ajax('/api/notice/getSysNoticeList',data,res => {
					if (res.code == 200) {
						this.pages = res.data.pages;
						let sysNoticeList = res.data.list || []
						if(sysNoticeList.length>0){
							this.sysNotice = sysNoticeList[0]
							let noticeId = this.sysNotice.noticeId
							let userId = uni.getStorageSync('user')?uni.getStorageSync('user').userId : '' //登录用户id
							let readArr = uni.getStorageSync('readArr') || [] // 已读用户集合
							console.log('本地readArr',readArr,',noticeId',noticeId,',userId',userId)
							if(readArr.length==0){  // 没有用户集合
								const obj = {
									noticeId:noticeId,
									userId:userId
								}
								readArr.push(obj)
								uni.setStorageSync('readArr',readArr)
								this.openPopup('noticePopup');
							}else{ // 有用户
								const index = readArr.findIndex(item=>item.userId==userId)
								console.log('index',index)
								if(index>-1){ // 找到读过的用户
									console.log('本地noticeId',readArr[index].noticeId,',线上noticeId',noticeId)
									// 用户集合noticeId是否跟线上id相同
									if(readArr[index].noticeId != noticeId){
										readArr[index].noticeId = noticeId
										uni.setStorageSync('readArr',readArr)
										this.openPopup('noticePopup');
									}
								}else{  // 没有找到读过用户
									const obj = {
										noticeId:noticeId,
										userId:userId
									}
									readArr.push(obj)
									uni.setStorageSync('readArr',readArr)
									this.openPopup('noticePopup');
								}
							}
							
						}
					}
				}, err =>{
				}, 'GET' , false
			)
		},
		// 解锁
		unLock(){
				console.log('isRead',this.isRead)
				this.remainingTime =0;
				this.totalDuration = 0
				this.showClose=false
				this.openPopup('psdPopup');
				return
				if(!this.isRead){
					this.remainingTime =0;
					this.totalDuration = 0
					this.showClose=false
					this.openPopup('psdPopup');
				}else{
					this.$tools.toast('今日已解锁，请明日再来')
				}
			},
			// 视频是否已看
			getVideoProfitSize(){
				var data = {
				};
				this.$Ajax('/api/money/getVideoProfitSize',data,res => {
					this.isShowPage = true;
						if (res.code == 200) {
							this.isRead = res.data
						}
					}, err =>{
					}, 'GET'
				)
			},
			// 获取视频
			getVideoList(){
				var data = {
				};
				this.$Ajax('/api/money/getVideoList',data,res => {
					this.isShowPage = true;
						if (res.code == 200) {
							this.videoSrc = res.data?res.data[0].img:''
						}
					}, err =>{
					}, 'GET'
				)
			},
			// 暂停开始
			onPlay(event) {
				// 当视频播放时触发
				this.currentTime = event.detail.currentTime;
				// #ifdef APP-PLUS
				// 当视频播放时，自动进入全屏
				// plus.screen.lockOrientation("landscape-primary"); // 锁定横屏
				// // 设置全屏
				plus.navigator.setFullscreen(true);
				// #endif
			},
			// 播放中
			onTimeUpdate(event) {
      // 当视频的播放时间发生更新时触发
			// console.log('currentTime',event.detail.currentTime)
      // this.currentTime =parseInt(event.detail.currentTime);
			// 获取视频总时长（秒）
      if (!this.totalDuration) {
        this.totalDuration = parseInt(event.detail.duration);
      }
			// console.log('totalDuration',this.totalDuration,',currentTime',event.detail.currentTime)
      // 更新当前播放时长（秒）
      this.currentTime = parseInt(event.detail.currentTime);
      // // 计算剩余时间并格式化
      let remainingSeconds = Math.max(this.totalDuration - this.currentTime, 0);
			this.remainingTime = parseInt(remainingSeconds)
      // let hours = Math.floor(remainingSeconds / 3600);
      // let minutes = Math.floor((remainingSeconds % 3600) / 60);
      // let seconds = parseInt(remainingSeconds % 60);
      // this.remainingTime = (hours ? hours + ':' : '') + (minutes < 10 ? '0' : '') + minutes + ':' + (seconds < 10 ? '0' : '') + seconds;
    	},
		// 播放完成
			onVideoEnded() {
				// 视频播放完毕后的逻辑
				console.log('视频播放已结束');
				console.log('remainingTime',this.remainingTime)
				// 这里可以关闭视频或执行其他操作
				this.showClose = true
				// this.closeVideo()
			},
			// 播放完成关闭传后台
			closeVideo(){
				this.hidePopup('psdPopup')
				if(this.remainingTime == 0){
					var data = {};
					this.$Ajax('/api/money/viewVideoProfit',data,res => {
							if (res.code == 200) {
								this.$tools.toast(res.data.msg)
								// if(!this.isRead){
								// 	// this.$tools.toast('领取成功')
								// }else{
								// 	// this.$tools.toast('今天贡献金已领取')
								// }
								this.getVideoProfitSize()
							}
						}, err =>{
						}
					)
				}
			},
			/* 弹出框公用 */
			openPopup(e, item) {
				this.popupInfo = item;
				this.$refs[e].open();
			},
			hidePopup(e) {
				this.$refs[e].close();
				this.password = '';
			},
			changePopup(e) {
				console.log('popup ' + e.type + ' 状态', e.show);
			},
	},
};
</script>

<style lang="scss" scoped>
	.pages{
		background: #F9F9F9;
		overflow-y: auto;
		// padding-bottom: 40rpx;
		padding-bottom: 140rpx;
		// height: 100vh;
		/* #ifdef APP-PLUS */
		padding-bottom: calc(140rpx + var(--status-bar-height));
		/* #endif */
	}
	.indexBg{
		background: url('@/static/index1/index-topBg.png') no-repeat;
		background-size: 100% 550rpx;
		overflow: hidden;
		&-top{
			width: 93.6%;
			margin: auto;
			margin-top: 48rpx;
			/* #ifdef APP-PLUS */
			margin-top: calc(48rpx + var(--status-bar-height));
			/* #endif */
			background: url('@/static/index1/index-topBg1.png') no-repeat;
		  background-size: 100% 100%;
			.list{
				padding: 44rpx 0;
				@include flexLeft;
				.item{
					width: 33.3%;
					text-align: center;
					position: relative;
					.num{
						font-weight: 600;
						font-size: 40rpx;
						color: #EE3A33;
						line-height: 40rpx;
					}
					.txt{
						font-weight: 600;
						font-size: 28rpx;
						color: #333333;
						line-height: 40rpx;
						margin-top: 12rpx;
					}
					.p{
						font-size: 24rpx;
						color: #FDA330;
						line-height: 40rpx;
						margin-top: 10rpx;
					}
					.btn{
						margin: auto;
						margin-top: 32rpx;
						width: 168rpx;
						text-align: center;
						height: 60rpx;
						line-height: 60rpx;
						background: #F4010A;
						box-shadow: inset 0rpx 0rpx 14rpx 0rpx #FFFFFF;
						border-radius: 1998rpx;
						font-weight: 600;
						font-size: 28rpx;
						color: #FFFFFF;
					}
					.ico1{
						width: 150rpx;
						height: 150rpx;
						margin-left: -50rpx;
						position: absolute;
						left: 50%;
						bottom: -54rpx;
					}
				}
			}
		}
		&-tab{
			width: 93.6%;
			margin: auto;
			margin-top: 32rpx;
			background: url('@/static/index1/index-topBg1.png') no-repeat;
		  background-size: 100% 100%;
			.list{
				padding: 22rpx 0;
				@include flexLeft;
				position: relative;
				.item{
					width: 25%;
					text-align: center;
					.ico{
						width: 72rpx;
						height: 72rpx;
						margin: auto;
					}
					.ico1{
						height:120rpx;
						width: 200rpx;
						position: absolute;
						top: -26rpx;
					}
					.txt{
						font-size: 28rpx;
						color: #000000;
						line-height: 40rpx;
						margin-top: 12rpx;
					}
				}
			}
		}
	.swiper-bg{
		width: 93.6%;
		margin: auto;
		height: 242rpx;
		position: relative;
	}
	.swiper-bg .uni-swiper__warp{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
	}
	.banner{
		width: 93.6%;
		margin: auto;
		margin-top: 20rpx;
		image{
			border-radius: 15px;
		}
		uni-swiper{
			height: 200rpx;
		}
	}
	.typeBox{
			width: 93.6%;
			margin: auto;
			margin-top: 20rpx;
			&-list{
				@include flexLeft;
				flex-wrap: wrap;
				.item{
					width: calc((100% - 20rpx) / 2);
					margin-left: 20rpx;
					height: 168rpx;
					margin-top: 20rpx;
					position: relative;
					
					.txt{
						background: url('@/static/index1/index-titleBg.png') no-repeat;
		  			background-size: 100% 100%;
						font-weight: 400;
						font-size: 24rpx;
						color: #FFFFFF;
						height: 42rpx;
						line-height: 42rpx;
						padding-left: 16rpx;
						padding-right: 40rpx;
						position: absolute;
						bottom: 10rpx;
						right: 0;
					}
					.img{
						width: 100%;
						height: 168rpx;
						border-radius: 12rpx;
					  border: 2rpx solid #FD0002;
					}
				}
				.item:nth-of-type(2n+1){
					margin-left: 0;
				}
				.item:nth-of-type(1),.item:nth-of-type(2){
					margin-top: 0;
				}
			}
	}
	.indexGoods{
		width: 93.6%;
		margin: auto;
		margin-top: 20rpx;
		padding: 0;
		.title{
			padding: 36rpx 0 18rpx 26rpx;
			font-weight: 600;
			font-size: 32rpx;
			color: #333333;
			line-height: 40rpx;
			background: url('@/static/index1/index-topBg1.png') no-repeat;
		  background-size: 100% 100%;
			border-radius: 20rpx 20rpx 0 0;
			padding-bottom: 180rpx;
			.ico{
				width: 46rpx;
				height: 46rpx;
				display: inline-block;
				vertical-align: middle;
				margin-right: 20rpx;
			}
		}
		&-list{
			margin-top: -160rpx;
		}
	}
}
	// 视频播放弹窗
	.modal-bg{
	width: 100%;
	height: 100%;
	background: rgba($color: #000000, $alpha: 0.5);
	position: absolute;
	top: 0;
	left: 0;
	z-index: 99999;
	overflow: hidden;
}
.modal,/deep/ .uni-popup__wrapper-box{
	width: 100%;
	height: 100%;
	overflow: hidden;
}
.video-box{
	width: 100%;
	height: 100%;
	background: #000;
	padding: 20rpx;
	padding-top: 60rpx;
	position: relative;
	overflow: hidden;
	.txt{
		max-width: 80%;
	}
	.txt text{
		font-size: 14px;
		color: #fff;
		background: rgba(95, 84, 84 , 0.6);
		// width: 60rpx;
		padding: 10rpx 20rpx;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		border-radius: 20rpx;
		// z-index: 999999;
		// position: absolute;
		// top: 80rpx;
		// left: 20rpx;
	}
	.close{
		width: 40rpx;
		height: 40rpx;
		position: absolute;
		top: 80rpx;
		right: 20rpx;
	}
	.video{
		width: 100%;
		height: 100%;
		margin-top: 0rpx;
	}
}
// 公告弹窗
.notice-box{
	width: 518rpx;
	height: 986rpx;
	background: url('@/static/index1/notice_bg.png') no-repeat;
	background-size: 100% 100%;
	padding: 0 46rpx;
	position: absolute;
	left: 50%;
	top: 10%;
	margin-left: -259rpx;
	.title{
		margin-top: 200rpx;
		font-weight: 600;
		font-size: 32rpx;
		padding-left: 30rpx;
		height: 80rpx;
		color: #333333;
		text-align: center;
		overflow: hidden;
		// text-overflow: ellipsis;
		// white-space: nowrap;
	}
	.content{
		font-weight: 500;
		font-size: 28rpx;
		color: #333333;
		margin-top: 40rpx;
		padding-left: 30rpx;
		height: 41%;
		padding: 20rpx;
		overflow-y: auto;
	}
	.bottom{
		text-align: right;
		font-weight: 500;
		font-size: 28rpx;
		color: #000000;
		.time{
			margin-top: 20rpx;
		}
	}
	.close{
		width: 40rpx;
		height: 40rpx;
		position: absolute;
		bottom: 0rpx;
		right: 50%;
		margin-left: -20rpx;
	}
}
// 大尺寸的
@media (min-height: 812px) {
	.notice-box .title{
		// margin-top: 270rpx;
	}
	.notice-box .content{
		// margin-top: 50rpx;
	}
}
</style>
